{% load static %}
<table class="table table-bordered table-striped table-condensed">
  <thead>
    <th width="20%">Name</th>
    <th width="20%">Parent</th>
    <th width="15%">Status</th>
    <th width="20%">Date Start</th>
    
    <th width="8%">Actions</th>
  </thead>
  <tbody id="callslist">
    {% for call in calls %}
    <tr id="call{{ call.id }}">
      <td><a id="call{{ call.id }}name" href="#">{{ call.name }}</a></td>
      <td><a id="call{{ call.id }}parent" href="#">{{ call.parent }}</a></td>
      <td><a id="call{{ call.id }}status" href="#">{{ call.status }}</a></td>
      <td><a id="call{{ call.id }}start_date" href="#">{{ call.start_date }}</a></td>
      
      <td>
        <div class="dropdown">
          <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
          Action
          <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li><a class="viewthis" href="#">View</a></li>
            <li><a class="editthis" href="#">Edit</a></li>
            <li><a class="removethis" href="#">Remove</a></li>
            <li><a class="setstatus" value="Held" href="#">Set Held</a></li>
            <li><a class="setstatus" value="Not Held" href="#">Set Not Held</a></li>
          </ul>
        </div>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% if calls|length == 0 %}
<div class="heading text-center"> No Calls found</div>
{% endif %}
<div class="pagination_row text-center row marl">
  <ul class="pagination">
    <li>
      {% if calls.has_previous %}
      <a class="paginate-me" href="?page={{ calls.previous_page_number }}">Previous</a>
      {% endif %}
    </li>
    <li>
      {% for page in calls.paginator.page_range %}
    <li class="{% if calls.number == page %}active{% endif %}"><a class="paginate-me"
      href="?page={{ page }}">{{ page }}</a>
    </li>
    {% endfor %}
    </li>
    <li>
      {% if calls.has_next %}
      <a class="paginate-me" href="?page={{ calls.next_page_number }}">Next</a>
      {% endif %}
    </li>
  </ul>
</div>
<script src="{% static 'js/setstatus.js' %}"></script>